﻿@{
    ViewBag.Title = "JqGrid";
}

<div class="page-content">
    <div class="page-header">
        <h1>jqGrid
								<small>
                                    <i class="icon-double-angle-right"></i>
                                    Dynamic tables and grids using jqGrid plugin
                                </small>
        </h1>
    </div>
    <!-- /.page-header -->

    <div class="row">
        <div class="col-xs-12">
            <!-- PAGE CONTENT BEGINS -->

            <div class="alert alert-info">
                <i class="icon-hand-right"></i>

                Please note that demo server is not configured to save the changes, therefore you may get an error message.
									<button class="close" data-dismiss="alert">
                                        <i class="icon-remove"></i>
                                    </button>
            </div>

            <table id="grid-table"></table>

            <div id="grid-pager"></div>

            <script type="text/javascript">
                var $path_base = "/";//this will be used in gritter alerts containing images
            </script>

            <!-- PAGE CONTENT ENDS -->
        </div>
        <!-- /.col -->
    </div>
    <!-- /.row -->
</div>
<!-- /.page-content -->

@section cssPagePlugin {
    <link rel="stylesheet" href="/assets/css/jquery-ui-1.10.3.full.min.css" />
    <link rel="stylesheet" href="/assets/css/datepicker.css" />
    <link rel="stylesheet" href="/assets/css/ui.jqgrid.css" />
}
@section styles {
}
@section jsPagePlugin {
    <script src="/assets/js/date-time/bootstrap-datepicker.min.js"></script>
    <script src="/assets/js/jqGrid/jquery.jqGrid.min.js"></script>
    <script src="/assets/js/jqGrid/i18n/grid.locale-en.js"></script>
}
@section scripts {
    <script type="text/javascript">
        var grid_data =
        [
            { id: "1", name: "Desktop Computer", note: "note", stock: "Yes", ship: "FedEx", sdate: "2007-12-03" },
            { id: "2", name: "Laptop", note: "Long text ", stock: "Yes", ship: "InTime", sdate: "2007-12-03" },
            { id: "3", name: "LCD Monitor", note: "note3", stock: "Yes", ship: "TNT", sdate: "2007-12-03" },
            { id: "4", name: "Speakers", note: "note", stock: "No", ship: "ARAMEX", sdate: "2007-12-03" },
            { id: "5", name: "Laser Printer", note: "note2", stock: "Yes", ship: "FedEx", sdate: "2007-12-03" },
            { id: "6", name: "Play Station", note: "note3", stock: "No", ship: "FedEx", sdate: "2007-12-03" },
            { id: "7", name: "Mobile Telephone", note: "note", stock: "Yes", ship: "ARAMEX", sdate: "2007-12-03" },
            { id: "8", name: "Server", note: "note2", stock: "Yes", ship: "TNT", sdate: "2007-12-03" },
            { id: "9", name: "Matrix Printer", note: "note3", stock: "No", ship: "FedEx", sdate: "2007-12-03" },
            { id: "10", name: "Desktop Computer", note: "note", stock: "Yes", ship: "FedEx", sdate: "2007-12-03" },
            { id: "11", name: "Laptop", note: "Long text ", stock: "Yes", ship: "InTime", sdate: "2007-12-03" },
            { id: "12", name: "LCD Monitor", note: "note3", stock: "Yes", ship: "TNT", sdate: "2007-12-03" },
            { id: "13", name: "Speakers", note: "note", stock: "No", ship: "ARAMEX", sdate: "2007-12-03" },
            { id: "14", name: "Laser Printer", note: "note2", stock: "Yes", ship: "FedEx", sdate: "2007-12-03" },
            { id: "15", name: "Play Station", note: "note3", stock: "No", ship: "FedEx", sdate: "2007-12-03" },
            { id: "16", name: "Mobile Telephone", note: "note", stock: "Yes", ship: "ARAMEX", sdate: "2007-12-03" },
            { id: "17", name: "Server", note: "note2", stock: "Yes", ship: "TNT", sdate: "2007-12-03" },
            { id: "18", name: "Matrix Printer", note: "note3", stock: "No", ship: "FedEx", sdate: "2007-12-03" },
            { id: "19", name: "Matrix Printer", note: "note3", stock: "No", ship: "FedEx", sdate: "2007-12-03" },
            { id: "20", name: "Desktop Computer", note: "note", stock: "Yes", ship: "FedEx", sdate: "2007-12-03" },
            { id: "21", name: "Laptop", note: "Long text ", stock: "Yes", ship: "InTime", sdate: "2007-12-03" },
            { id: "22", name: "LCD Monitor", note: "note3", stock: "Yes", ship: "TNT", sdate: "2007-12-03" },
            { id: "23", name: "Speakers", note: "note", stock: "No", ship: "ARAMEX", sdate: "2007-12-03" }
        ];

        jQuery( function ( $ ) {
            var grid_selector = "#grid-table";
            var pager_selector = "#grid-pager";

            jQuery( grid_selector ).jqGrid( {
                //direction: "rtl",

                data: grid_data,
                datatype: "local",
                height: 250,
                colNames: [' ', 'ID', 'Last Sales', 'Name', 'Stock', 'Ship via', 'Notes'],
                colModel: [
                    {
                        name: 'myac', index: '', width: 80, fixed: true, sortable: false, resize: false,
                        formatter: 'actions',
                        formatoptions: {
                            keys: true,

                            delOptions: { recreateForm: true, beforeShowForm: beforeDeleteCallback },
                            //editformbutton:true, editOptions:{recreateForm: true, beforeShowForm:beforeEditCallback}
                        }
                    },
                    { name: 'id', index: 'id', width: 60, sorttype: "int", editable: true },
                    { name: 'sdate', index: 'sdate', width: 90, editable: true, sorttype: "date", unformat: pickDate },
                    { name: 'name', index: 'name', width: 150, editable: true, editoptions: { size: "20", maxlength: "30" } },
                    { name: 'stock', index: 'stock', width: 70, editable: true, edittype: "checkbox", editoptions: { value: "Yes:No" }, unformat: aceSwitch },
                    { name: 'ship', index: 'ship', width: 90, editable: true, edittype: "select", editoptions: { value: "FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX" } },
                    { name: 'note', index: 'note', width: 150, sortable: false, editable: true, edittype: "textarea", editoptions: { rows: "2", cols: "10" } }
                ],

                viewrecords: true,
                rowNum: 10,
                rowList: [10, 20, 30],
                pager: pager_selector,
                altRows: true,
                //toppager: true,

                multiselect: true,
                //multikey: "ctrlKey",
                multiboxonly: true,

                loadComplete: function () {
                    var table = this;
                    setTimeout( function () {
                        styleCheckbox( table );

                        updateActionIcons( table );
                        updatePagerIcons( table );
                        enableTooltips( table );
                    }, 0 );
                },

                editurl: $path_base + "/dummy.html",//nothing is saved
                caption: "jqGrid with inline editing",


                autowidth: true

            } );

            //enable search/filter toolbar
            //jQuery(grid_selector).jqGrid('filterToolbar',{defaultSearch:true,stringResult:true})

            //switch element when editing inline
            function aceSwitch( cellvalue, options, cell ) {
                setTimeout( function () {
                    $( cell ).find( 'input[type=checkbox]' )
                            .wrap( '<label class="inline" />' )
                        .addClass( 'ace ace-switch ace-switch-5' )
                        .after( '<span class="lbl"></span>' );
                }, 0 );
            }
            //enable datepicker
            function pickDate( cellvalue, options, cell ) {
                setTimeout( function () {
                    $( cell ).find( 'input[type=text]' )
                            .datepicker( { format: 'yyyy-mm-dd', autoclose: true } );
                }, 0 );
            }


            //navButtons
            jQuery( grid_selector ).jqGrid( 'navGrid', pager_selector,
                { 	//navbar options
                    edit: true,
                    editicon: 'icon-pencil blue',
                    add: true,
                    addicon: 'icon-plus-sign purple',
                    del: true,
                    delicon: 'icon-trash red',
                    search: true,
                    searchicon: 'icon-search orange',
                    refresh: true,
                    refreshicon: 'icon-refresh green',
                    view: true,
                    viewicon: 'icon-zoom-in grey',
                },
                {
                    //edit record form
                    //closeAfterEdit: true,
                    recreateForm: true,
                    beforeShowForm: function ( e ) {
                        var form = $( e[0] );
                        form.closest( '.ui-jqdialog' ).find( '.ui-jqdialog-titlebar' ).wrapInner( '<div class="widget-header" />' )
                        style_edit_form( form );
                    }
                },
                {
                    //new record form
                    closeAfterAdd: true,
                    recreateForm: true,
                    viewPagerButtons: false,
                    beforeShowForm: function ( e ) {
                        var form = $( e[0] );
                        form.closest( '.ui-jqdialog' ).find( '.ui-jqdialog-titlebar' ).wrapInner( '<div class="widget-header" />' )
                        style_edit_form( form );
                    }
                },
                {
                    //delete record form
                    recreateForm: true,
                    beforeShowForm: function ( e ) {
                        var form = $( e[0] );
                        if ( form.data( 'styled' ) ) return false;

                        form.closest( '.ui-jqdialog' ).find( '.ui-jqdialog-titlebar' ).wrapInner( '<div class="widget-header" />' )
                        style_delete_form( form );

                        form.data( 'styled', true );
                    },
                    onClick: function ( e ) {
                        alert( 1 );
                    }
                },
                {
                    //search form
                    recreateForm: true,
                    afterShowSearch: function ( e ) {
                        var form = $( e[0] );
                        form.closest( '.ui-jqdialog' ).find( '.ui-jqdialog-title' ).wrap( '<div class="widget-header" />' )
                        style_search_form( form );
                    },
                    afterRedraw: function () {
                        style_search_filters( $( this ) );
                    }
                    ,
                    multipleSearch: true,
                    /**
                    multipleGroup:true,
                    showQuery: true
                    */
                },
                {
                    //view record form
                    recreateForm: true,
                    beforeShowForm: function ( e ) {
                        var form = $( e[0] );
                        form.closest( '.ui-jqdialog' ).find( '.ui-jqdialog-title' ).wrap( '<div class="widget-header" />' )
                    }
                }
            )



            function style_edit_form( form ) {
                //enable datepicker on "sdate" field and switches for "stock" field
                form.find( 'input[name=sdate]' ).datepicker( { format: 'yyyy-mm-dd', autoclose: true } )
                    .end().find( 'input[name=stock]' )
                          .addClass( 'ace ace-switch ace-switch-5' ).wrap( '<label class="inline" />' ).after( '<span class="lbl"></span>' );

                //update buttons classes
                var buttons = form.next().find( '.EditButton .fm-button' );
                buttons.addClass( 'btn btn-sm' ).find( '[class*="-icon"]' ).remove();//ui-icon, s-icon
                buttons.eq( 0 ).addClass( 'btn-primary' ).prepend( '<i class="icon-ok"></i>' );
                buttons.eq( 1 ).prepend( '<i class="icon-remove"></i>' )

                buttons = form.next().find( '.navButton a' );
                buttons.find( '.ui-icon' ).remove();
                buttons.eq( 0 ).append( '<i class="icon-chevron-left"></i>' );
                buttons.eq( 1 ).append( '<i class="icon-chevron-right"></i>' );
            }

            function style_delete_form( form ) {
                var buttons = form.next().find( '.EditButton .fm-button' );
                buttons.addClass( 'btn btn-sm' ).find( '[class*="-icon"]' ).remove();//ui-icon, s-icon
                buttons.eq( 0 ).addClass( 'btn-danger' ).prepend( '<i class="icon-trash"></i>' );
                buttons.eq( 1 ).prepend( '<i class="icon-remove"></i>' )
            }

            function style_search_filters( form ) {
                form.find( '.delete-rule' ).val( 'X' );
                form.find( '.add-rule' ).addClass( 'btn btn-xs btn-primary' );
                form.find( '.add-group' ).addClass( 'btn btn-xs btn-success' );
                form.find( '.delete-group' ).addClass( 'btn btn-xs btn-danger' );
            }
            function style_search_form( form ) {
                var dialog = form.closest( '.ui-jqdialog' );
                var buttons = dialog.find( '.EditTable' )
                buttons.find( '.EditButton a[id*="_reset"]' ).addClass( 'btn btn-sm btn-info' ).find( '.ui-icon' ).attr( 'class', 'icon-retweet' );
                buttons.find( '.EditButton a[id*="_query"]' ).addClass( 'btn btn-sm btn-inverse' ).find( '.ui-icon' ).attr( 'class', 'icon-comment-alt' );
                buttons.find( '.EditButton a[id*="_search"]' ).addClass( 'btn btn-sm btn-purple' ).find( '.ui-icon' ).attr( 'class', 'icon-search' );
            }

            function beforeDeleteCallback( e ) {
                var form = $( e[0] );
                if ( form.data( 'styled' ) ) return false;

                form.closest( '.ui-jqdialog' ).find( '.ui-jqdialog-titlebar' ).wrapInner( '<div class="widget-header" />' )
                style_delete_form( form );

                form.data( 'styled', true );
            }

            function beforeEditCallback( e ) {
                var form = $( e[0] );
                form.closest( '.ui-jqdialog' ).find( '.ui-jqdialog-titlebar' ).wrapInner( '<div class="widget-header" />' )
                style_edit_form( form );
            }



            //it causes some flicker when reloading or navigating grid
            //it may be possible to have some custom formatter to do this as the grid is being created to prevent this
            //or go back to default browser checkbox styles for the grid
            function styleCheckbox( table ) {
                /**
					$(table).find('input:checkbox').addClass('ace')
					.wrap('<label />')
					.after('<span class="lbl align-top" />')
			
			
					$('.ui-jqgrid-labels th[id*="_cb"]:first-child')
					.find('input.cbox[type=checkbox]').addClass('ace')
					.wrap('<label />').after('<span class="lbl align-top" />');
				*/
            }


            //unlike navButtons icons, action icons in rows seem to be hard-coded
            //you can change them like this in here if you want
            function updateActionIcons( table ) {
                /**
                var replacement = 
                {
                    'ui-icon-pencil' : 'icon-pencil blue',
                    'ui-icon-trash' : 'icon-trash red',
                    'ui-icon-disk' : 'icon-ok green',
                    'ui-icon-cancel' : 'icon-remove red'
                };
                $(table).find('.ui-pg-div span.ui-icon').each(function(){
                    var icon = $(this);
                    var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
                    if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
                })
                */
            }

            //replace icons with FontAwesome icons like above
            function updatePagerIcons( table ) {
                var replacement =
                {
                    'ui-icon-seek-first': 'icon-double-angle-left bigger-140',
                    'ui-icon-seek-prev': 'icon-angle-left bigger-140',
                    'ui-icon-seek-next': 'icon-angle-right bigger-140',
                    'ui-icon-seek-end': 'icon-double-angle-right bigger-140'
                };
                $( '.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon' ).each( function () {
                    var icon = $( this );
                    var $class = $.trim( icon.attr( 'class' ).replace( 'ui-icon', '' ) );

                    if ( $class in replacement ) icon.attr( 'class', 'ui-icon ' + replacement[$class] );
                } )
            }

            function enableTooltips( table ) {
                $( '.navtable .ui-pg-button' ).tooltip( { container: 'body' } );
                $( table ).find( '.ui-pg-div' ).tooltip( { container: 'body' } );
            }

            //var selr = jQuery(grid_selector).jqGrid('getGridParam','selrow');


        } );
    </script>
}